import { Carousel } from "antd-mobile";
import React, { Fragment } from "react";
import { Link } from "react-router-dom";

export default function Swiper(props) {
  return (
    <Fragment>
      <Carousel autoplay={false} infinite>
        {/* 条件渲染判断 */}
        {props.data &&
          props.data.map((val) => (
            <Link
              key={val.id}
              style={{
                display: "inline-block",
                width: "100%",
                height: props.imgH,
              }}
              to={`/detail/${val.id}`}
            >
              <img
                src={val.img}
                alt=""
                style={{
                  width: "100%",
                  height: "176px",
                  verticalAlign: "top",
                }}
              />
            </Link>
          ))}
      </Carousel>
    </Fragment>
  );
}
